Een website maken met Xara XS 


Gebeten door webgraphics 


Xara XS is de jonge hond onder de grafische programma's. In ons vorig nummer hebben we 
de grafische mogelijkheden van deze applicatie belicht. Als afsluiter maken we interactieve 
afbeeldingen. We bouwen een website met zichtbare en onzichtbare knoppen, of zoals ze 
in het jargon zeggen: ‘buttons’ en ‘hotspots’. 4 rk scuoors 


p de cd bij Clickx 116 vond je het grafisch pakket Xara XS — je 

kan ook een probeerversie downloaden op 
In de vorige twee nummers kon je al lezen dat het pro- 
gramma een uitstekende hulp is om foto’s te bewerken en dat je het 
ook kan gebruiken om met illustraties aan de slag te gaan. Maar er is 
meer! Xara XS biedt namelijk ook de nodige opties voor websitebou- 
wers. 
Als je een website maakt, kan je vertrekken van een leeg blad en 
daarop hier en daar grafische elementen plaatsen. Maar de meeste 
webontwerpers werken anders. Ze ontwerpen de homepage in een 
grafisch pakket als één grote afbeelding, die ze achteraf in verschil- 
lende stukken snijden. Ze zorgen er dan voor dat bepaalde zones van 
de afbeelding aanklikbaar worden, zodat er allerlei dingen gebeuren 
wanneer de bezoeker op die speciale zones (hotspots) klikt. Er kan 
muziek beginnen spelen, een spelletje starten of je kan naar een an- 
dere pagina doorgeschakeld worden. En ook hiervoor kan je Xara XS 
inschakelen. 


STAP 1 / HOMEPAGE ONTWERPEN 


We vertrekken van een nieuw leeg document van 600 bij 400 pixels. 
Omdat Xara XS standaard vertrekt van documenten die 800 bij 600 
pixels meten, zullen we de documenteigenschappen aanpassen met Fie, 
Pace options. Daar kiezen we voor een Lanpscape-instelling en duiden we 
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de gewenste pixelproporties aan (zie afbeelding 1). Vervolgens plakken 
we een afbeelding in het lege werkblad (wij gebruiken een foto van een 
hondje). 

We hebben nu al een achtergrondafbeelding, maar we willen ook en- 
kele navigeerknoppen. Daarvoor gebruiken we het Text-gereedschap: we 
geven de woorden in die op de vier knoppen moeten komen, en in de 
infobalk vergroten we de regelafstand — waardoor die woorden een 
flink eind uit elkaar komen te staan. 

Om de knoppen duidelijker te maken, voorzien we ze van een achter- 
grondkleur. We selecteren de RecraneLe-tool en trekken een rechthoek 
over de bovenste tekst. Door onderaan in de kleurenbalk te klikken, 
vullen we deze rechthoek met zacht grijs. We klikken op deze rechthoek 
en gebruiken de toetsencombinatie Crru+D om de knop driemaal te 
dupliceren. Met de kleurenbalk geven we iedere knop een ander soort 
grijs. Vervolgens selecteren we de vier knoppen door de Suirr-toets 
ingedrukt te houden en op elke knop te klikken. Daarna kiezen we de 
opdracht Arrange, Pur To BACK, zodat de knoppen achter de tekst komen 
te liggen. 


STAP 2 / KNOPPEN UITLIJNEN 


We kunnen de knoppen handmatig naar de juiste plaats slepen, maar 
dat is vaak nogal onnauwkeurig. Er is een betere manier. Met Arrange, 
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De titel wordt aanklikbaar. 


Oggect ALIGNMENT kunnen we de knoppen netjes ten opzichte van elkaar 
uitlijnen en de onderlinge tussenruimte gelijk verdelen. Klaar? Dan 
selecteren we opnieuw de tekst, positioneren die netjes over de knop- 
pen, en door de regelafstand te vergroten of te verkleinen, zorgen we 
dat ieder woord keurig over iedere knop staat (zie afbeelding 2). 

Er is nog een tool die we nog niet besproken hebben: Mouuo. Met deze 
tool kan je tekst en vorm uit perspectief trekken. De liefhebbers van 
exotische titels kunnen tekst bol zetten, schuinaflopend maken, enzo- 
voort. Omdat Xara XS tekst vectorieel behandelt, kan je deze vervorming 
aanpassen door de sleephendels te verplaatsen. 


STAP 3 / HOTSPOT 


Het is mogelijk om onderdelen van de afbeelding aanklikbaar te maken, 
zodat de bezoeker naar een nieuwe webpagina wordt doorgeschakeld. 
Zo’n aanklikbare punten noemen we hotspots. Wanneer je verschillende 
onderdelen van een afbeelding aanklikbaar maakt, krijg je een zogehe- 
ten image map. Hier zullen we om te beginnen een hotspot maken van 
het logo. We klikken op de titel (It's a dog’s life”) en zoeken in het 
menu Urrrries de opdracht Weg Appress. In het vak URL geven we het 
webadres in waarnaar de browser van de bezoeker zal doorschakelen. 
Omdat de optie Correct URL AuromaricaLLy actief is, zal het programma 
dit adres zelf van ‘http://” voorzien. Onder Cuickasre area heb je twee 
keuzemogelijkheden. Wanneer je de optie Smape or oBJecr aanduidt, moet 
de bezoeker echt op de lettertjes klikken. Indien de muisaanwijzer zich 
bijvoorbeeld ergens tussen “a” en “dog” bevindt, kan hij niets aanklik- 
ken. Daarom is het verstandiger om de optie RECTANGLE SURROUNDING OBJECT 
te gebruiken (zie afbeelding 3). Hierdoor wordt de rechthoekige zone 
rond de tekst volledig aanklikbaar. 


STAP 4 / INTERACTIE STUREN 


Als je een degelijke website wil bouwen, moet je toch een béétje kennis 
hebben van het hele html-gebeuren. Heel wat webbouwers verdelen een 
webpagina in frames, bijvoorbeeld een menu aan de linkerkant van het 
scherm en de hoofdpagina rechts daarvan. Wanneer de bezoeker van 
de site op een link in het menu klikt, wordt een nieuwe hoofdpagina 
getoond, terwijl het menu natuurlijk moet blijven staan. In het vakje 
TARGET FRAME FoR URL vertel je de browser in welk frame de nieuwe pa- 
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Exporteer deze image map in het gif-formaat. 


gina moet worden geladen. Gebruik je geen frames, of twijfel je, dan 
hou je het bij de veilige optie Same FRAME As THIS DOCUMENT (_ seLF). Het 
nieuwe venster wordt dan in hetzelfde frame geopend. 

Wil je dat de url gewoon in een nieuwe pagina wordt geladen, dan 
opteer je voor New winpow (_ BLANK). Wil je de pagina laden in het- 
zelfde venster van dit document, waarbij alle bestaande frames ver- 
vangen worden, dan kies je SAME WINDOW As THIS DOCUMENT (_ Top). Ten- 
slotte is er nog de optie PARENT FRAME OF THIS DOCUMENT (__ PARENT). Hier 
wordt het nieuwe document geopend in de frameset waarin de link 
zich bevindt. 


STAP 5 / EXPORTEREN 


Dan komt het moment dat je de image map moet exporteren. Kies in 
het menu Fire voor Exporr, selecteer het CompuServe GIF-formaat en geef 
dit bestand een naam (zie afbeelding 5). Heb je een bestandsnaam van 
twee woorden op het oog, dan moet je er aan denken om bijvoorbeeld 
een underscore () te gebruiken tussen de twee woorden. Het gaat 
immers om bestanden die later op een internetserver worden ge- 
plaatst, en heel wat servers kunnen niet overweg met spaties. 

In het venster GIF Export BITMAP options klik je op het tabblad Imace Map 
en vink je de optie Export Image Mar To Frie aan, zodat er een webdo- 
cument (html-bestand) wordt aangemaakt waarin de image map ge- 
toond wordt. Daarna klik je op het tabblad Browser Preview. Hier opte- 


VAKTAAL 


FRAMES: Webpagina's die ingedeeld zijn in verschillende vlakken, kunnen frames gebruiken. 
De navigatiestructuur kan bijvoorbeeld in één frame staan. Als je op een link klikt, wordt 
enkel één frame opnieuw geladen. Dit bespaart tijd, want de navigatiestructuur zelf moet 
niet opnieuw geladen worden. 


HTML: De programmeertaal om webpagina's te maken. Bijzonder aan html is de mogelijkheid 
om hyperlinks naar andere pagina's te maken. Om html-pagina's te bekijken, heb je een 
browser zoals Internet Explorer of Firefox nodig. 


VECTORIEEL: Een vectoriële afbeelding bestaat uit vormen die wiskundig berekend worden 
(vectoren). Omdat vectoriële afbeeldingen eigenlijk allemaal getallen zijn, zijn ze erg klein 
en hebben ze geen last van kwaliteitsverlies bij het vergroten. 
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ren we bij Backarounp Options voor een neutrale eenvoudige achtergrond, 
en bij AppirroNAL INFORMATION vinken we de opties IncLupe IMAGE INFORMATION 
en Incuupe Image Map aan. Wanneer we nu op Browser Preview klikken, 
krijgen we een voorvertoning van hoe deze image map er op het web 
zal uitzien. Bovendien merken we dat de hotspot werkt en wordt in een 
rooster getoond hoelang het zal duren om deze pagina over verschil 
lende bandbreedtes in te laden. Op dezelfde manier kunnen we even- 
eens de vier knoppen selecteren en ze als hotspots wegschrijven. 


STAP 6 / HULPLIJNEN 


Doorwinterde webmasters zullen grote afbeeldingen als deze versnijden 
— een techniek die ‘slicing’ genoemd wordt. Het voordeel van deze in- 
greep is dat verschillende zones op een verschillende manier geopti- 
maliseerd worden, waardoor de optelsom (bestandsgrootte) van de 
verschillende versneden beelden veel kleiner is dan wanneer de afbeel- 
ding als één groot geheel ingeladen moet worden. Het tweede voordeel 
is dat je onderdelen van een versneden beeld kan wijzigen zonder dat 
je het hele plaatje moet aanpassen. 

Om te beginnen, gaan we hulplijnen trekken die de snijlijnen aangeven. 
We laten de linialen tevoorschijn komen met Winpow, Bars, Rurers. Ver- 
volgens slepen we de hulplijnen uit de linialen. In dit geval willen we 
dat de hond wordt uitgesneden, naast de titel en de vier knoppen. 
Vervolgens selecteren we de RecrangLe-tool, waarmee we rechthoeken 
trekken over deze zes objecten. Zorg dat in de infobalk de lijndikte op 
None staat; de kleur van de inhoud speelt geen rol. Dankzij de hulplijnen 
kunnen we deze zones afbakenen. 


STAP 7 / SLICES BENOEMEN 


We moeten iedere uitsnede een naam geven in de Name Gallery. We 
openen deze Gallery via Ururries, GALLERIES, NAME GALLERY. Alle namen van 
de gebruikte lettertypes, bitmap-afbeeldingen en zelfs kleuren worden 
in de Name Gallery bewaard. We klikken op de map Use names en vervol- 
gens op de knop New, waardoor er een klein venstertje geopend wordt 
waarmee we iedere zone kunnen benoemen: gewoon een duidelijke 
naam ingeven en op Create Klikken (zie afbeelding 7). We herhalen dit 
tot de zes versneden objecten een verschillende naam hebben. Daarna 
klikken we op een van de oranje vlakken, en via de opdracht Weg Appress 
geven we bij Urmrries de webadressen in waarnaar deze hotspots de 


ROLLOVERS IN XARA XS? 


Xara XS beschikt over tools om op een bijzonder eenvoudige manier rollover- 


knoppen te maken die zich achteraf nog prima laten bewerken. Zo’n rollover 
maakt dat je, als je met je muis over een afbeelding op een website beweegt, 


een andere afbeelding te zien krijgt (met een andere kleur bijvoorbeeld). En 
als je op de afbeelding klikt, krijg je nóg een andere afbeelding te zien. Het 
gereedschap dat hiervoor door Xara gebruikt wordt, zit niet in de gratis 
versie die je twee nummers geleden op de Clickx-cd kon vinden. Dat belet 


niet dat je de werking van deze tool al kan zien. Zoek bij HetPp onder de 
Movies naar het filmpje over deze internettoepassing. Op die manier kan je 
beslissen of je dit de moeite waard vindt om over te stappen naar de beta- 


lende versie. 
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In de Name Gallery geven we ieder versneden (aanklikbaar) deel een naam. 


browser van de bezoeker zullen sturen. 

Omdat niemand gediend is met oranje vlakken op een homepage, zullen 
we na de naamgeving ieder vlak transparant maken. Dat doen we door 
op het vlak te klikken en daarna het transparantievakje (links naast de 
kleurenbalk) aan te duiden. 


STAP 8 / EXPORTEREN 


Tenslotte trekken we met het pijltje uit de gereedschapsbalk een se- 
lectierechthoek over de hele afbeelding, zodat alle objecten geselec- 
teerd worden. We kiezen in het menu Frie de optie EXPORT IMAGE IN SLICES. 
Je moet een naam voor het bestand ingeven, en vervolgens krijg je een 
exportvenster te zien waarin gevraagd wordt of je tevreden bent met 
de gif-compressie (zie afbeelding 8). 

Het is verstandig om dit bestand samen met de versneden grafische 
bestanden in een nieuwe map te bewaren. Klik op de knop Export, zodat 
alle versneden bestanden en het html-bestand dat al deze aanklikbare 
beelden op de juiste plaats samenhoudt, netjes weggeschreven worden 
naar de harde schijf. « 
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We exporteren het html-bestand en de versneden delen best naar een afzon- 
derlijke map. 


